<template>
  <div>
    <div class="userList">
      <div>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="userQuery.userName"
              placeholder="请输入用户名"
              size="small"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-input
              v-model="userQuery.account"
              placeholder="请输入账号"
              size="small"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-search"
              plain
              @click="getUser()"
              >搜索</el-button
            >
          </el-col>
          <el-col :span="6"> </el-col>
        </el-row>
      </div>
      <el-table
        ref="multipleTable"
        :data="userList"
        tooltip-effect="dark"
        style="width: 100%"
        row-key="id"
        size="mini"
        @select="select"
        @select-all="selectAll"
      >
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
          :selectable="selectInit"
        >
        </el-table-column>
        <el-table-column fixed prop="userName" label="用户">
          <template slot-scope="scope">{{ scope.row | showUserInfo }}</template>
        </el-table-column>
        <el-table-column prop="deptFullName" label="部门">
          <template slot-scope="scope">{{
            scope.row.deptFullName | deptFormat
          }}</template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200px">
        </el-table-column>
      </el-table>
      <Pagination
        style="margin-top: 20px"
        v-show="parseInt(pageObj.count) > 0"
        :total="parseInt(pageObj.count)"
        @change="getUser"
        :page.sync="userQuery.page"
        :limit.sync="userQuery.limit"
      />
    </div>
  </div>
</template>
<script>
import { tbSysUserQuery } from '@/api/admin/user/user-manage.js'
import Bus from '@/utils/bus.js'
export default {
  data() {
    return {
      multipleSelection: [],
      userQuery: {
        page: 1,
        limit: 10,
        account: '',
        userName: '',
        filterAccountId: '',
      },
      pageObj: {},
      userList: [],
      echoUserData: [],
    }
  },
  props: ['userId', 'filterCurrentAccount'],
  mounted() {
    // if (this.userId.length) {
    //   if (typeof this.userId[0] == "string") {
    //     this.multipleSelection = JSON.parse(JSON.stringify(this.userId));
    //     this.echoUserData = JSON.parse(JSON.stringify(this.userId));
    //   } else {
    //     let arr = this.userId.map((v) => v.id);
    //     this.multipleSelection = arr;
    //     this.echoUserData = arr;
    //   }
    // }
    this.multipleSelection = JSON.parse(JSON.stringify(this.userId))
    this.echoUserData = JSON.parse(JSON.stringify(this.userId))
    this.getUser()
  },
  watch: {
    multipleSelection(arr) {
      let data = {
        userId: arr.filter((v) => !this.userId.includes(v.id)),
      }

      Bus.$emit('setGrantUser', data)
    },
  },
  methods: {
    selectInit(row) {
      return !this.userId.includes(row.id)
    },
    //获取人员
    getUser() {
      this.userQuery.filterAccountId = this.filterCurrentAccount
        ? this.$store.getters.userId
        : ''
      tbSysUserQuery(this.userQuery).then((res) => {
        if (res.data.code == 0) {
          this.pageObj = res.data
          this.userList = res.data.data
          // if (this.echoUserData.length > 0) {
          //   this.multipleSelection = this.echoUserData;
          // }

          this.handleSelected()
        }
      })
    },
    //返回选中数据
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // },
    // 判断操作的id选中状态
    select(selection, row) {
      this.multipleSelection = selection
    },
    selectAll(selection) {
      this.multipleSelection = selection
    },
    //数据回显
    handleSelected() {
      // let checkedArr = this.myFilter(this.userList, this.multipleSelection);
      let idArr = this.multipleSelection.map((v) => v.id)
      let checkedArr = this.myFilter(this.userList, idArr)
      if (checkedArr.length) {
        this.$nextTick(() => {
          checkedArr.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row, true)
          })
        })
      }
    },
    //过滤数组相同元素
    myFilter(arr1, arr2) {
      return arr1.filter((ele) => arr2.filter((x) => x === ele.id).length > 0)
    },
    myDiffFilter(arr1, arr2) {
      return arr1.filter((ele) => arr2.filter((x) => x.id != ele.id).length > 0)
    },
  },
}
</script>